<template>
  <div class="container">
    <div class="label">您有{{ chanceNum }}次抽奖机会</div>
    <div class="item">
      <div class="onitem" v-show="onshow == 1"></div>
      <img src="~assets/choujiang/images/tizhongji.png" />
    </div>
    <div class="item">
      <div class="onitem" v-show="onshow == 2"></div>
      <img src="~assets/choujiang/images/huafei.png" />
    </div>
    <div class="item">
      <div class="onitem" v-show="onshow == 3"></div>
      <img src="~assets/choujiang/images/maotan.png" />
    </div>
    <div class="item">
      <div class="onitem" v-show="onshow == 8"></div>
      <img src="~assets/choujiang/images/shiyuan.png" />
    </div>
    <div class="item" @click="!clickDisabled ? startRotate() : ''">
      <img src="~assets/choujiang/images/button.png" />
    </div>
    <div class="item">
      <div class="onitem" v-show="onshow == 4"></div>
      <img src="~assets/choujiang/images/thank.png" />
    </div>
    <div class="item">
      <div class="onitem" v-show="onshow == 7"></div>
      <img src="~assets/choujiang/images/thank.png" />
    </div>
    <div class="item">
      <div class="onitem" v-show="onshow == 6"></div>
      <img src="~assets/choujiang/images/shoudian.png" />
    </div>
    <div class="item">
      <div class="onitem" v-show="onshow == 5"></div>
      <img src="~assets/choujiang/images/huafei.png" />
    </div>
  </div>
</template>
<script>
export default {
  name: "choujiangTable",
  data() {
    return {
      onshow: 1,
      chanceNum: 1,
      circleNum: 3, //动画圈数
      prizeNum: -1, //中奖序号，应从后端得，这里在函数中随机生成
      clickDisabled: false,
      timer: "",
    };
  },
  methods: {
    startRotate() {
      this.clickDisabled = true;
      this.prizeNum = Math.floor(Math.random() * 8) + 1;
      console.log(this.prizeNum);
      let stopNum = this.circleNum * 8 + this.prizeNum;
      let i = 0;
      if (this.timer) {
        clearInterval(this.timer);
      }
      this.timer = setInterval(() => {
        this.onshow = (i % 8) + 1;
        i++;
        console.log(this.onshow);
        if (i >= stopNum) {
          clearInterval(this.timer);
        }
      }, 200);
      setTimeout(() => {
        this.clickDisabled = false
      },200*stopNum+100)
    },
  },
};
</script>
<style lang="stylus" scoped>
.container
  padding 1.82rem 0.94rem 1.22rem 0.94rem
  display flex
  flex-wrap wrap
  align-items center
  justify-content center
  height 10.36rem
  width 11.52rem
  background-image url('~assets/choujiang/images/table.png')
  background-size 100% 100%
  .label
    position absolute
    top 0.4rem
    // height .6rem
    // line-height .6rem
    color #fff477
    font-weight bold
  .item
    position relative
    margin 0.08rem 0.06rem
    width 3.7rem
    height 3.2rem
    .onitem
      position absolute
      width 100%
      height 100%
      background-color rgba(241, 246, 211, 0.4)
      border-radius 0.4rem
    img
      width 100%
      height 100%
.onitem
  background-color #fff
</style>